<template>
	<view style="display: flex; flex-direction: row;">
		<!-- 左 -->
		<div id="zb" style="overflow: scroll;">
			<span v-for="(item,index) in spnrzx" :key="index" :class='{bs1:temIndex==index}'>
				<p @click="bs(index)" style="width: 100%;">{{item.szname}}</p>
			</span> 
		</div>
		
		
		<!-- 上 -->
		<div style="display: flex; flex-direction: column;overflow: scroll;">
			<div class="youb">
				<span v-for="(item,index) in sbdhl" :key="index" :class='{bs2:tis==index}'>
						<p style="width: 35px;" @click="bs1(index)">{{item.name}}</p>
				</span>
				<span style="display: flex; flex-direction: row-reverse;" @click="ycxx">
					<img :src="yz ? '../../static/sb1.png':'../../static/下载.png'" style="width: 20px; height: 20px;">
				</span>
				
				
					<div class="dhzyc" style="display: flex; flex-direction: column;" v-if="isno===yz">
						<div class="youb">
							<span v-for="(item,index) in sbdhl" :key="index"  style="padding: 0px 50px 0px 15px;">
									<p @click="bs2(index)" style="position: absolute;top: 10%;width: 50px; height: 25px;text-align: center;" :class='{bs3:tis==index}'>{{item.name}}</p>
							</span>
						</div>
					</div>	
			</div>
			
			<!-- 商品内容 -->
			<div class="spnr">
				<div>
					<img src="../../static/2.png" style="height: 80px;width: 250px;">
				</div>
				<div style=""  v-for="(item,index) in sznr" :key="index">
					<div v-show="tis===item.id">
						{{item.name}}
					</div>
				</div>
				<div>
					<div class="spnrs" v-for="(item,index) in spnrzx" :key="index" 
					v-if="temIndex+1 === item.int">
						<view class="" v-for="item in item.sznr" v-if="tis === item.id | tis === 0">
							<span>
								<img :src="item.yftp" style="width: 60px; height: 60px;border-radius: 5px 5px 5px 5px;">
							</span>
							<span style="">
								<div class="txy">
									<div class="kz">
										<p>{{item.yfname}}</p>
									</div>
									<div style="font-size: 10px;color: #c3c3c3;">
										<p>{{item.cx}}</p>
									</div>
									<span style="font-size: 20px;">
										<span>{{item.dazhej}}</span>
										<span style="text-decoration: line-through;padding: 20px;color: #c3c3c3;">{{item.yuanjia}}</span>
										<span style="padding: 15px;">
											<img src="../../static/add.png" style="width: 15px;height: 15px;">
										</span>
									</span>
								</div>
								
							</span>	
						</view>
					</div>
				</div>
			</div>
		</div>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dhl:[
					{sgname:'当季热卖'},
					{sgname:'切果'},
					{sgname:'苹果'},
					{sgname:'哈密瓜'},
					{sgname:'哇哈哈'},
					{sgname:'八宝粥'},
					{sgname:'香蕉'},
					{sgname:'柿子'}
				],
				temIndex:0,
				sbdhl:[
					{name:'全部',id:0},
					{name:'短袖',id:1},
					{name:'长袖',id:2},
					{name:'裤子',id:3}
				],
				tis:0,
				yz:false,
				title:0,
				isno:true,
				spnrzx:[
					{
						szname:'数据1',
						int:1,
						sznr:[
							{
								yftp:'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
								yfname:'裤子',
								cx:'测试',
								dazhej:'￥5',
								yuanjia:'￥109',
								id:3
							},
							{
								yftp:'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
								yfname:'长袖',
								cx:'测试',
								dazhej:'￥9',
								yuanjia:'￥103',
								id:2
							}
						]
					},
					{
						szname:'数据2',
						int:2,
						sznr:[
							{
								yftp:'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
								yfname:'短袖',
								cx:'测试',
								dazhej:'￥7',
								yuanjia:'￥102',
								id:1
							},
							{
								yftp:'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
								yfname:'短袖',
								cx:'测试',
								dazhej:'￥7',
								yuanjia:'￥102',
								id:1
							}
						]
					},
					// {
					// 	yftp:'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					// 	yfname:'裤子',
					// 	cx:'测试',
					// 	dazhej:'￥5',
					// 	yuanjia:'￥109',
					// 	id:3
					// },
					// {
					// 	yftp:'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					// 	yfname:'长袖',
					// 	cx:'测试',
					// 	dazhej:'￥6',
					// 	yuanjia:'￥104',
					// 	id:2
					// },
					// {
					// 	yftp:'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					// 	yfname:'短袖',
					// 	cx:'测试',
					// 	dazhej:'￥7',
					// 	yuanjia:'￥102',
					// 	id:1
					// },
					// {
					// 	yftp:'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					// 	yfname:'长袖',
					// 	cx:'测试',
					// 	dazhej:'￥8',
					// 	yuanjia:'￥104',
					// 	id:2
					// },
					// {
					// 	yftp:'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					// 	yfname:'长袖',
					// 	cx:'测试',
					// 	dazhej:'￥9',
					// 	yuanjia:'￥103',
					// 	id:2
					// }
				],
				zb:true
			}
		},
		methods: {
			bs(index){
				this.temIndex=index
			},
			bs1(index){
				this.tis=index
			},
			bs2(index){
				this.tis=index
				this.yz = false
				console.log(this.yz)
				
			},
			ycxx(){
				this.yz =! this.yz
				console.log(this.yz)
			}
		}
	}
</script>

<style>
	span{
		/* padding: 15px; */
		color: #666666;
		/* font-size: 11px; */
	}
	.bs1{
		border-left: 5px solid #ffaaff;
		color: #ffaaff;
	}
	.bs2{
		border-bottom: 5px solid #ffaaff;
		color: #ffaaff;
	}
	.bs3{
		border: 1px solid #ffaaff;
		color: #ffaaff;
		
		border-radius: 5px 5px 5px 5px;
		/* background-color: #666666; */
	}
	#zb{
		display: flex;
		flex-direction: column;
		text-align: center;
		height: 100vh;
		/* width: 20%; */
		background-color: #fdfbff;
		/* border-right: 1px solid #9d9d9d; */
	}
	#zb span{
		padding:20px 20px 20px 0px;
		/* border: 1px solid #3a3a3a; */
		/* height: 100%; */
		width: 100%;
		
	}
	#zb p{
		width: 100%;
		height: 100%;
		text-align: center;
		/* border: 1px solid #3a3a3a; */
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.youb{
		display: flex;
		flex-direction: row;
		/* background-color: antiquewhite; */
	}
	.youb span{
		display: flex;
		flex-direction: row;
		padding: 20px 10px 20px 10px;
	}
	.dhzyc{
		position: absolute;
		top: 0%;
		width: 80%;
		height: 100%;
		background:rgba(254, 254, 254, 0.7);
	}
	.spnr{
		display: flex; 
		flex-direction: column;
		/* background-color: #ffaa00; */
		padding: 10px 10px 10px 10px;
	}
	.spnrs{
		display: flex;
		flex-direction: column;
		/* background-color: #ffaa00; */
	}
	.spnrs {
		display: flex;
		flex-direction: row;
		padding: 5px 0px 0px 0px;
	}
	.spnrs div{
		
	}
	.kz{
		font-size: 20px;
	}
	.txb{
		display: flex;
		flex-direction: row;
	}
	.txy{
		display: flex;
		flex-direction: column;
		padding: 0px 0px 0px 20px;
	}
</style>
